⭐任務說明

😸本次將學習到 Router 中的 Link

<Link>是什麼

在我們前面的範例程式碼中，可以知道 <Link> 是一個元素，可以把他想成他和 <a> 一樣，
提供的功能是可以讓使用者連結到指定的頁面。

格式說明

基本用法

• to：可以是指定的一個 URL 頁面 /productList

<Link to="/productList">產品列表</Link>

• 或是可以放入一個表達式，動態產生連結
• 如果 <Link to="..."> 中的內容，不是以 / 為開頭，則代表他會以父層路由進行解析

<Link to={`products/${product.id}`}>{product.name}</Link>

relative 屬性

• 把路由以相對路徑進行處理
• 在巢狀路由的情況下，要回到上一層可以這麼寫

    <Link to=".." relative="path">

preventScrollReset 屬性

• 提供可阻止頁面的滾動重置，當畫面重整時會發生滾動位置重置在頂端，加了這個屬性可以進行控制可保留在原始的位置上

<Link to="/test" preventScrollReset={true} />

replace 屬性

• 如果是要讓頁面是 history.replaceState 就可以加上這個屬性
• 參考資料：History: replaceState() method

<Link to="/new-page" replace={true}>往前一頁</Link>

state 屬性

• 可以讓 Link 有狀態值，後面可以 useLocation() 存取

<Link to="new-page" state={{ tag: "value" }} />

結語

下個任務見！